<template>
    <n-modal
        v-model:show="showModal"
        class="custom-card"
        preset="card"
        :style="bodyStyle"
        size="huge"
        :bordered="false"
        :segmented="segmented"
    >
        <n-tabs
            type="line"
            size="large"
            :tabs-padding="20"
            animated
            @before-leave="handleBeforeLeave"
            pane-style="padding: 20px;"
        >
            <n-tab-pane name="总览">
                <overview-tab :data="OverviewTabData"/>
            </n-tab-pane>
            <n-tab-pane name="任务分析">
                <task-analysis-tab :data="taskAnalysisData"/>
            </n-tab-pane>
            <n-tab-pane name="执行任务">
                <vue-flow-tab :data="flowData"/>
            </n-tab-pane>
            <n-tab-pane name="表格评分">
                <data-table-tab @set-score="setTableScore" :data="tableData" :old_score="old_score"/>
            </n-tab-pane>
            <n-tab-pane name="图形评分">
                <picture-tab ref="pictureTabRef" @set-score="setPictureScore" :data="pictureData"/>
            </n-tab-pane>
            <n-tab-pane name="评分规则" tab="评分规则">
                <div style="height: 58vh;">
                    <img :src="STATIC + 'img/%E8%AF%84%E5%88%86%E8%A7%84%E5%88%99.png'" alt="">
                </div>
            </n-tab-pane>
        </n-tabs>


    </n-modal>
</template>

<script setup>
import VueFlowTab from "@/components/teacher/模态框/tab/VueFlowTab.vue";
import DataTableTab from "@/components/teacher/模态框/tab/DataTableTab.vue";
import workApi from "@/http/workApi";
import OverviewTab from "@/components/teacher/模态框/tab/OverviewTab.vue";
import TaskAnalysisTab from "@/components/teacher/模态框/tab/TaskAnalysisTab.vue";
import PictureTab from "@/components/teacher/模态框/tab/PictureTab.vue";
import {STATIC} from "@/assets/server";

const showModal = ref(false)
const pictureTabRef = ref(null)
const taskInfo = ref({
    student_id: null,
    training_id: null,
    task_id: null
})
const setShowModel = (value = null, info) => {
    if (value === null) {
        showModal.value = !showModal.value
    } else {
        showModal.value = value
        taskInfo.value = info
        openPersonalGrade()
        openFlow()
        openPicture()
        openTable()

    }
}
const segmented = {
    content: "soft",
    footer: "soft"
}
const bodyStyle = {
    width: "80vw",
    height: "80vh"
}
const handleBeforeLeave = (tabName) => {
    switch (tabName) {
        case "总览":
            openPersonalGrade()
            break
        case "任务分析":
            openTaskAnalysis()
            break
        case "执行任务":
            openFlow()
            break
        case "表格评分":
            openTable()
            break
        case "图形评分":
            openPicture()
            break

    }
    return true;
}
// 点击总览
const OverviewTabData = ref({})

function openPersonalGrade() {
    workApi.get("teacher/student_score_info", {
        params: taskInfo.value
    }).then(r => {
        OverviewTabData.value = r.data
        console.log(OverviewTabData.value)
    })
}

// 任务分析
const taskAnalysisData = ref({})

function openTaskAnalysis() {
    workApi.get("teacher/student_task_analysis", {
        params: taskInfo.value
    }).then(r => {
        taskAnalysisData.value = r.data
        console.log(taskAnalysisData.value)
    })
}

// 点击表格的成绩打开表格信息
const tableData = ref({})
const old_score = ref(null)
const openTable = () => {
    workApi.get("teacher/student_task_perform_table", {
        params: taskInfo.value
    }).then(r => {
        tableData.value = r.data
        old_score.value = r.task_perform_table_score
    })
}
// 打开图形评分
const pictureData = ref({})
const openPicture = () => {
    workApi.get("teacher/student_task_perform_picture", {
        params: taskInfo.value
    }).then(r => {
        pictureData.value = r.data
        console.log(pictureTabRef.value)
        pictureTabRef.value.drawing()
    })
}

function setTableScore(new_score) {
    console.log(new_score)
    if (new_score === null) {
        window.$message.info("请填写成绩")
        return
    }
    workApi.post("teacher/student_task_perform_table_score", {
        ...taskInfo.value,
        new_score
    })
}

// 点击图形成绩 打开图形界面
const flowData = ref([])
const openFlow = () => {
    workApi.get("teacher/student_task_perform_flowchart", {
        params: taskInfo.value
    }).then(r => {
        flowData.value = r.data
    })
}

function setPictureScore(new_score) {
    console.log(new_score)
    if (new_score === null) {
        window.$message.info("请填写成绩")
        return
    }
    workApi.post("teacher/student_task_perform_picture_score", {
        ...taskInfo.value,
        new_score
    })
}

defineExpose({
    setShowModel
})
</script>

<style scoped lang="less">
img{
    height: 100%;
}
</style>